<div class="grid-household-edit">
	<nz-divider nzText="村户" nzOrientation="left"></nz-divider>
	<form nz-form [formGroup]="validateForm">
		<nz-form-item>
			<nz-form-label [nzSm]="4" [nzXs]="24"  nzFor="contact">村户联系人</nz-form-label>
			<nz-form-control [nzSm]="8" [nzXs]="24" nzErrorTip="村户联系人不能为空!">
				<input nz-input formControlName="contact" id="contact" />
			</nz-form-control>

			<nz-form-label [nzSm]="4" [nzXs]="24"  nzFor="contractNumber">村户联系人手机号码</nz-form-label>
			<nz-form-control [nzSm]="8" [nzXs]="24" nzErrorTip="村户联系人手机号码不能为空!">
				<input nz-input formControlName="contractNumber" id="contractNumber" />
			</nz-form-control>
		</nz-form-item>

		<nz-form-item>
			<nz-form-label [nzSm]="4" [nzXs]="24"  nzFor="householdCode">村户编号</nz-form-label>
			<nz-form-control [nzSm]="8" [nzXs]="24" nzErrorTip="村户编号不能为空!">
				<input nz-input formControlName="householdCode" id="householdCode" />
			</nz-form-control>

			<nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="rental">是否出租</nz-form-label>
			<nz-form-control [nzSm]="8" [nzXs]="24">
				<nz-switch formControlName="rental" nzCheckedChildren="是" nzUnCheckedChildren="否"></nz-switch>
			</nz-form-control>
		</nz-form-item>
		<nz-form-item>
			<nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="areaId">社区地址</nz-form-label>
			<nz-form-control [nzSm]="8" [nzXs]="24" nzErrorTip="社区地址不能为空!">
				<nz-cascader [nzOptions]="areaOptions" formControlName="areaId"> </nz-cascader>
			</nz-form-control>

			<nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="address">村户详细地址</nz-form-label>
			<nz-form-control [nzSm]="8" [nzXs]="24" nzErrorTip="村户详细地址不能为空!">
				<input nz-input formControlName="address" id="address" />
			</nz-form-control>


		</nz-form-item>
		<nz-form-item>
			<nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="housemaster">户主</nz-form-label>
			<nz-form-control [nzSm]="8" [nzXs]="24" nzErrorTip="户主不能为空!">
				<input nz-input formControlName="housemaster" id="housemaster" />
			</nz-form-control>

			<nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="housemasterContactNum">户主联系电话</nz-form-label>
			<nz-form-control [nzSm]="8" [nzXs]="24" nzErrorTip="户主联系电话不能为空!">
				<input nz-input formControlName="housemasterContactNum" id="housemasterContactNum" />
			</nz-form-control>
		</nz-form-item>
		<nz-form-item>
			<nz-form-label [nzSm]="4" [nzXs]="24"  nzFor="housemaster">村户标签</nz-form-label>
			<nz-form-control [nzSm]="8" [nzXs]="24" nzErrorTip="村户标签不能为空!">
				<nz-select formControlName="tags" nzPlaceHolder="请选择村户标签" [nzMode]="'multiple'">
					<nz-option *ngFor="let item of tagList" [nzLabel]="item.tagName" [nzValue]="item.id">
					</nz-option>
				</nz-select>


			</nz-form-control>


		</nz-form-item>
	</form>
	<nz-divider [nzText]="getFormControl('rental').value ? '出租信息' : '户籍信息'" nzOrientation="left"></nz-divider>

	<button nz-button nzType="primary" nzSize="small" style="margin-bottom: 10px;" (click)="add()">
		<i nz-icon nzType="plus"></i>
		新增
	</button>

	<nz-table #nzTable [nzData]="lists" [nzFrontPagination]="false" nzSize="small" [nzScroll]="{y: '400px'}">
		<thead>
			<tr>
				<th nzAlign="center" nzWidth="20%">姓名</th>
				<th nzAlign="center" nzWidth="25%">联系号码</th>
				<th nzAlign="center" nzWidth="15%">性别</th>
				<th nzAlign="center" nzWidth="20%">出生年月日</th>
				<th nzAlign="center" nzWidth="20%">操作</th>
			</tr>
		</thead>
		<tbody>
			<tr *ngFor="let data of nzTable.data; let i = index;">
				<ng-container *ngIf="data.delFlag !== '1'">
					<td nzAlign="center">
						<ng-container *ngIf="editData?.id !== data.id">
							{{data.name}}
						</ng-container>
						<ng-container *ngIf="editData?.id === data.id">
							<input nz-input [(ngModel)]="editData.name">
						</ng-container>
					</td>
					<td nzAlign="center">
						<ng-container *ngIf="editData?.id !== data.id">
							{{data.conntectNumber}}
						</ng-container>
						<ng-container *ngIf="editData?.id === data.id">
							<input nz-input [(ngModel)]="editData.conntectNumber">
						</ng-container>
					</td>
					<td nzAlign="center">
						<ng-container *ngIf="editData?.id !== data.id">
							{{data.gender === 'M' ? '男' : ''}}
							{{data.gender === 'F' ? '女' : ''}}
						</ng-container>
						<ng-container *ngIf="editData?.id === data.id">
							<nz-select style="width: 100%;" [(ngModel)]="editData.gender" nzPlaceHolder="请选择" nzAllowClear>
								<nz-option *ngFor="let item of genderList" [nzLabel]="item.label" [nzValue]="item.value">
								</nz-option>
							</nz-select>
						</ng-container>
						
					</td>
					<td nzAlign="center">
						<ng-container *ngIf="editData?.id !== data.id">
							{{data.birthdate | date: 'yyyy-MM-dd'}}
						</ng-container>
						<ng-container *ngIf="editData?.id === data.id">
							<nz-date-picker [(ngModel)]="editData.birthdate" nzPlaceHolder="请选择"></nz-date-picker>
						</ng-container>
					</td>
					<td nzAlign="center">
						<ng-container *ngIf="editData?.id !== data.id">
							<a (click)="edit(data)">编辑</a>
							<nz-divider nzType="vertical" style="margin: 10px!important;"></nz-divider>
							<a  nz-popconfirm nzPopconfirmTitle="确定删除吗?" (nzOnConfirm)="del(data)">删除</a>
						</ng-container>
						<ng-container *ngIf="editData?.id === data.id">
							<a (click)="save(data)">保存</a>
							<nz-divider nzType="vertical" style="margin: 10px!important;"></nz-divider>
							<a (click)="cancel(data)">取消</a>
						</ng-container>
					</td>
				</ng-container>
			</tr>
		</tbody>
	</nz-table>
</div>